<script>
import { defineComponent, ref, onMounted, h } from '@vue/composition-api';
import { MessageBox, Message, FormItem, Form, Dialog } from 'element-ui';
import { mapGetters } from 'vuex';
import {
  GetMemberList,
  GetYearList,
  CheckMember,
  DelMember,
  MemberCheckRate,
  MemberRate,
} from '@/api/member';
import { markOptions, markMap, classNoMap } from './enum';
export default defineComponent({
  name: 'MemberList',
  components: { FormItem, Form },
  props: {
    type: { type: Number, default: 0 }, // 0 任命 1 工作
  },
  setup(props) {
    const { type } = props;
    const loading = ref(false);
    const list = ref([]);
    const pageNum = ref(1);
    const pageSize = ref(10);
    const total = ref(0);

    const formRef = ref();
    const formModel = ref({ schoolYear: '', orgName: '', studentName: '', classNo: '', mark: '' });
    const status = ref('0');
    const markStatus = ref('12');

    const loadData = async () => {
      loading.value = true;
      const { schoolYear, orgName, studentName, classNo, mark } = formModel.value;
      const payload = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        status: type ? undefined : status.value,
        schoolYear: schoolYear || undefined,
        orgName: orgName || undefined,
        studentName: studentName || undefined,
        classNo: classNo || undefined,
        mark: mark || undefined,
        markStatus: type ? markStatus.value : undefined,
      };
      const response = await GetMemberList(payload);
      loading.value = false;
      if (response.code === 200) {
        const { rows, total: rowTotal } = response;
        list.value = rows.map(el => ({
          ...el,
          classNo: el.classNo && el.classNo < 7 ? classNoMap.get(el.classNo) : '/',
        }));
        total.value = rowTotal;
      }
    };

    const refresh = () => {
      pageNum.value = 1;
      loadData();
    };

    const reset = formEl => {
      formEl.resetFields();
      refresh();
    };

    const schoolYears = ref([]);

    const getYearList = async () => {
      const response = await GetYearList();
      if (response.code === 200) {
        schoolYears.value = response.rows;
        for (let i = 0; i < response.total; i++) {
          if (response.rows[i].defaultValue == '1') {
            formModel.value.schoolYear = response.rows[i].schoolYearId;
          }
        }
          loadData();
      }
    };

    onMounted(() => {
      getYearList();
    });

    const selectKeys = ref([]);

    const handleSelectionChange = rows => {
      console.log(rows.map(el => el.orgMemberId));
      selectKeys.value = rows.map(el => el.orgMemberId);
    };

    /** 批量任命 */
    const handleCheck = () => {
      if (selectKeys.value.length === 0) {
        Message.error({
          message: '请勾选需审核的任命',
        });
        return;
      }
      MessageBox.confirm(`确认同意批量任命${selectKeys.value.length}条数据？`, '确认审核通过', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const response = await CheckMember({ orgMemberIds: selectKeys.value });
        if (response.code === 200) {
          Message({
            message: '任命成功',
            type: 'success',
          });
          selectKeys.value = [];
          loadData();
        }
      });
    };

    /** 单一任命 */
    const handleCheckOne = record => {
      const { studentId, studentName, positionName, orgName } = record;
      MessageBox.confirm(
        `确认同意将 ${studentId}-${studentName} 在 [${orgName}] 任命为 ${positionName} ？`,
        '确认审核通过',
        {
          confirmButtonText: '同意任命',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        const response = await CheckMember({ orgMemberIds: [record.orgMemberId] });
        if (response.code === 200) {
          Message({
            message: '任命成功',
            type: 'success',
          });
          selectKeys.value = [];
          loadData();
        }
      });
    };

    /** 单一删除 */
    const handleDelOne = record => {
      const { studentId, studentName, positionName, orgName, orgMemberId } = record;
      MessageBox.confirm(
        `确认要删除 ${studentId}-${studentName} 在 [${orgName}] 任命为 ${positionName} 的任命信息？`,
        '确认删除',
        {
          confirmButtonText: '确认删除',
          cancelButtonText: '放弃删除',
          type: 'warning',
        }
      ).then(async () => {
        const response = await DelMember(orgMemberId);
        if (response.code === 200) {
          Message({
            message: '删除成功',
            type: 'success',
          });
          selectKeys.value = [];
          loadData();
        }
      });
    };

    const auditRef = ref();
    const auditModel = ref({ mark: null });
    const auditRule = ref({
      mark: [{ required: true, message: '请选择考核结果' }],
    });
    const dialogVisible = ref(false);
    const recordData = ref({});
    const AuditType = ref(0);

    /** 审批 */
    const handleAudit = (record, type) => {
      dialogVisible.value = true;
      recordData.value = record;
      AuditType.value = type;
      auditModel.value.mark = type ? record.mark : null;
    };

    const auditOk = formEl => {
      formEl.validate(async valid => {
        if (valid) {
          const payload = {
            orgMemberId: recordData.value.orgMemberId,
            mark: auditModel.value.mark,
          };
          const response = await (AuditType.value ? MemberCheckRate(payload) : MemberRate(payload));
          if (response.code === 200) {
            dialogVisible.value = false;
            Message({
              message: '操作成功',
              type: 'success',
            });
            loadData();
          }
        }
      });
    };

    const resetAudit = formEl => {
      formEl.resetFields();
      auditModel.value.mark = null;
    };

    return {
      formRef,
      formModel,
      status,
      markStatus,
      loadData,
      reset,
      refresh,
      loading,
      list,
      total,
      pageNum,
      pageSize,
      markOptions,
      markMap,
      schoolYears,
      handleSelectionChange,
      handleCheck,
      handleCheckOne,
      handleDelOne,
      handleAudit,
      dialogVisible,
      recordData,
      AuditType,
      auditRef,
      auditModel,
      auditRule,
      auditOk,
      resetAudit,
    };
  },
});
</script>

<template>
  <div class="app-container">
    <el-row>
      <el-tabs v-if="type" v-model="markStatus" type="card" @tab-click="refresh">
        <el-tab-pane label="考核结果待审核" name="12" />
        <el-tab-pane label="考核结果审核通过" name="13" />
        <el-tab-pane label="未填报工作考核结果" name="11" />
        <el-tab-pane label="未提交工作总结" name="10" />
      </el-tabs>
      <el-tabs v-else v-model="status" type="card" @tab-click="refresh">
        <el-tab-pane label="任命未审核" name="0" />
        <el-tab-pane label="任命已审核" name="1" />
      </el-tabs>
    </el-row>
    <el-row>
      <el-form ref="formRef" :model="formModel" inline size="mini">
        <el-form-item label="学期" prop="schoolYear">
          <el-select v-model="formModel.schoolYear" placeholder="请选择学期">
            <el-option
              v-for="option in schoolYears"
              :key="option.schoolYearId"
              :label="option.schoolYearId"
              :value="option.schoolYearId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="组织名称" prop="orgName">
          <el-input v-model="formModel.orgName" placeholder="请输入组织名称" />
        </el-form-item>
        <el-form-item label="学生" prop="studentName">
          <el-input v-model="formModel.studentName" placeholder="请输入学生姓名" />
        </el-form-item>
        <el-form-item label="班级" prop="classNo">
          <el-input v-model="formModel.classNo" placeholder="请输入班级" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="loadData">查询</el-button>
          <el-button type="primary" size="mini" @click="reset(formRef)">重置</el-button>
          <el-button
            type="primary"
            size="mini"
            v-if="type === 0 && status === '0'"
            @click="handleCheck"
            v-hasPermi="['approval:appointApproval:pass']"
          >
            批量任命审批通过
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55" v-if="type === 0" />
        <el-table-column label="学期" align="center" prop="schoolYear" />
        <el-table-column label="组织名称" align="center" prop="orgName" />
        <el-table-column label="学生" align="center" prop="studentId">
          <template slot-scope="scope">
            {{ scope.row.studentId }}<br />
            {{ scope.row.studentName }}
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" prop="sex" />
        <el-table-column label="系部" align="center" prop="unitName" />
        <el-table-column label="班级/社团联盟" align="center" prop="classNo" />
        <el-table-column label="职位" align="center" prop="positionName" />

        <el-table-column
          label="任命创建/审核时间"
          align="center"
          prop="createTime"
          v-if="type === 0"
        >
          <template slot-scope="scope"> [建]{{ scope.row.createTime }} </template>
        </el-table-column>
        <el-table-column
          label="工作考核结果"
          align="center"
          prop="mark"
          v-if="type === 1 && (markStatus === '12' || markStatus === '13')"
        >
          <template slot-scope="scope">
            {{ markMap.get(scope.row.mark) }}<br />
            <el-tag type="warning" v-if="markStatus === '12'">待审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          prop="id"
          v-if="type === 0 && status === '0'"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-hasPermi="['approval:appointApproval:agree']"
              @click="handleCheckOne(scope.row)"
              >同意任命</el-button
            >
            <el-button
              type="danger"
              v-hasPermi="['approval:appointApproval:delete']"
              @click="handleDelOne(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          prop="id"
          v-if="type === 1 && (markStatus === '11' || markStatus === '12')"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-hasPermi="['approval:checkApproval:input']"
              @click="handleAudit(scope.row, 0)"
              v-if="markStatus === '11'"
            >
              填报考评
            </el-button>
            <el-button
              type="primary"
              v-hasPermi="['approval:checkApproval:approval']"
              @click="handleAudit(scope.row, 1)"
              v-else
              >审批考评</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="loadData"
      />
    </el-row>
    <el-dialog
      :title="AuditType ? '审核结果' : '填写考评结果'"
      :visible.sync="dialogVisible"
      width="800px"
      destroy-on-close
      @close="resetAudit(auditRef)"
    >
      <el-form ref="auditRef" :rules="auditRule" :model="auditModel" label-width="80px" size="mini">
        <el-form-item label="组织名称">
          {{ recordData.orgName }}
        </el-form-item>
        <el-form-item label="学期">
          {{ recordData.schoolYear }}
        </el-form-item>
        <el-form-item label="姓名">
          {{ recordData.studentName }}
        </el-form-item>
        <el-form-item label="所属系部">
          {{ recordData.unitName }}
        </el-form-item>
        <el-form-item label="职位">
          {{ recordData.positionName }}
        </el-form-item>
        <el-form-item label="工作总结">
          {{ recordData.summary }}
        </el-form-item>
        <el-form-item label="考核结果" prop="mark">
          <el-select placeholder="请选择考核结果" v-model="auditModel.mark">
            <el-option
              v-for="option in markOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="auditOk(auditRef)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
